<template>
  <div class="detail">
    <van-nav-bar
  title="详情页"
  left-text="返回"
  right-text="首页"
  left-arrow
  @click-left="onClickLeft"
  @click-right="onClickRight"
/>
    <h3>{{ detail.name }}</h3>
    <img :src="detail.coverImg" width="100%" height="220" alt="" />
    <p>{{ detail.price }}</p>
    <van-goods-action>
  <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
  <van-goods-action-icon icon="cart-o" text="购物车" @click="$router.push('/cart')"/>
  <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
  <van-goods-action-button type="warning" text="加入购物车" @click="addcart(detail._id)"/>
  <van-goods-action-button type="danger" text="立即购买" />
</van-goods-action>
  </div>
</template>

<script>
import { Toast } from "vant";
import { reqProductsDetail } from "../../api/product";
import { addtocart } from "../../api/cart";
export default {
  data() {
    return {
      detail: {},
    };
  },
  computed: {},
  watch: {},

  methods: {
   
    async loadDetail(id) {
      const result = await reqProductsDetail(id);
      console.log(result);
      this.detail = result;
    },
    // 添加购物车
     async addcart(id) {
      const result = await addtocart({
        product: id,
        quantity: 1,
      });
      if (result.code == "success") {
        Toast.success(result.message);
      } else {
        Toast.fail(result.message);
      }
      console.log(result);
    },
     onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {
      this.$router.push("/home");
    },
  },
  created() {
    const id = this.$route.params.id;
    this.loadDetail(id);
  },
  mounted() {},
  components: {},
};
</script>
<style scoped></style>
